<template>
  <div>
      <div class="head">
          <strong>首页</strong> > 权限管理 > 权限列表
      </div>
      <el-card>
          <el-table :data='rightsList' border stripe class="box"> 
             <el-table-column type="index" > </el-table-column>
              <el-table-column label='权限名称' prop='authName' width=200px> </el-table-column>
              <el-table-column label='路径' prop='path'  width=200px> </el-table-column>
              <el-table-column label='权限等级' prop='level'> 
                  <template slot-scope="mo">
                       <el-tag v-if="mo.row.level==='0'">一级</el-tag>
                       <el-tag type="success" v-else-if="mo.row.level==='1'">二级</el-tag>
                       <el-tag type="warning" v-else>三级</el-tag>
                  </template>
              </el-table-column>
          </el-table>
      </el-card>
  </div>
</template>

<script>
export default {
     created(){
        this.getrightslist()
    },
   data(){
      return{
           rightsList:[],
      }
   },
  methods:{
      async getrightslist(){
       const{data:res} =await this.$http.get('rights/list')
       if(res.meta.status!==200){
           return this.$message.error('res.meta.msg')
       }
       this.rightsList = res.data
       //console.log(this.rightsList);
     
   },
  }
}
</script>

<style lang='less' scoped>
.head{
     margin-left: 20px;
     margin-top: 25px;
     font-size: 14px;
     margin-bottom: 20px;
}
.box{
    
   height: 100%;
   overflow: auto;

}
</style>